<!--
 * @Description: 实时曲线图
 * @Author: charles
 * @Date: 2021-12-08 09:46:08
 * @LastEditors: charles
 * @LastEditTime: 2021-12-08 12:28:36
-->
<template>
  <div ref="realTimeLine" style="height:300px"></div>
</template>
<script>
import { Area } from '@antv/g2plot';
export default {
  mounted(){
    this.renderChart();
  },
  props:['data','params'],
  methods:{
    renderChart(){
      const line = new Area(this.$refs.realTimeLine, {
        data: this.data,
        xField: 'time',
        yField: this.params.indicator,
        yAxis: {
          label:{
            style:{
              fill: '#666',
            }
          }
        },
        xAxis: {
          label:{
            rotate:-57,
            offset:10,
            style:{
              fill: '#666',
            }
          }
        },
        areaStyle: () => {
          return {
            fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
          };
        },
      });
      line.render();
    }
  }
}
</script>